import React from 'react';
import Input from '../';
import Icon from '../../Icon';

class Password extends React.Component {
    displayName = 'Password';

    state = {
        type: 'password'
    }

    onSwitchType = () => {
        this.setState({
            type: this.state.type === 'password' ? 'text' : 'password'
        });
    }

    render () {
        const props = Object.assign({}, this.props);
        delete props['password'];
        delete props['suffix'];
        delete props['type'];
        const iconName = this.state.type === 'password' ? 'eye' : 'eye-off';
        return <Input type={this.state.type} suffix={<Icon name={iconName} onClick={this.onSwitchType}/>} {...props}/>;
    }
}

export default Password;
